<template>
    <div class="relative flex-grow pt-4 px-2 h-full justify-between flex flex-col">
        <div class="flex flex-col h-80 overflow-y-auto pb-12">
            <VueDraggableNext
                class="transition-all"
                :list="store.sortedLayers"
                @change="updateZIndex"
                :delay="100"
                drag-class="bg-blue-400"
                ghost-class="opacity-0"
            >
                <transition-group>
                    <!-- 图层展示 -->
                    <div
                        v-for="layer in store.sortedLayers"
                        class="relative my-2 flex flex-row bg-zinc-600 rounded-lg backdrop-blur cursor-pointer overflow-hidden border-2"
                        :key="layer.id"
                        @click="store.selectLayer(layer.id)"
                        :class="[layer.selected ? 'border-zinc-400' : 'border-transparent']"
                    >
                        <SingleLayer :layer="layer"></SingleLayer>
                    </div>
                </transition-group>
            </VueDraggableNext>
        </div>

        <!-- 透明度调节器 -->
        <div class="absolute bottom-0 left-0 w-full flex-grow flex flex-col justify-end">
            <Progress
                :model-value="alpha"
                class="h-8 z-10 m-2"
                position="x"
                @update:model-value="changeAlpha"
            >
                <div class="h-full w-full flex flex-row justify-between items-center text-sm px-4">
                    <div>透明度</div>
                    <div>{{ alpha.toFixed(0) }} %</div>
                </div>
            </Progress>
        </div>
    </div>
</template>
<style scoped>
.icon {
    @apply text-lg hover:bg-zinc-600 transition-colors p-2 rounded-lg;
}
::-webkit-scrollbar {
    height: 0;
    width: 0;
}
</style>
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
import Progress from '../canvas/utils/Progress.vue'
import { DataOfLayer, useControllerStore } from '../Controller/Controller';
import { hub } from '../canvas/hub'
import { onMounted, onUnmounted, ref, watch } from 'vue';
import SingleLayer from './singleLayer.vue';
import { last } from 'lodash-es';

const store = useControllerStore()
onMounted(() => {
    hub.on('updateLayer', store.updateLayer)
})
onUnmounted(() => {
    hub.off('updateLayer', store.updateLayer)
})
// 图层 alpha 调节 
const alpha = ref(100)
// 图层 alpha 注入
watch(() => store.selectedLayer
    , (layers) => {
        if (layers.length) {
            alpha.value = Math.floor(last(layers)!.alpha * 100)
        }
    })
// 图层 alpha 更改
const changeAlpha = (Alpha: number) => {
    alpha.value = Alpha
    store.selected.layerID.forEach(id => {
        store.changeLayerState(id, { alpha: Alpha / 100 })
    })
}

// 更改 图层顺序
const updateZIndex = (data: { moved: { newIndex: number, oldIndex: number, element: DataOfLayer } }) => {
    store.updateLayerIndex(data.moved.oldIndex, data.moved.newIndex)
}

</script>